<template>
  <a-modal v-model="visiable" :width="1200">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <!-- <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-model-item label="商户/菜品名称">
                <a-input v-model="queryParam.tradeName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="上架状态">
                <a-select v-model="queryParam.upFlag" :allowClear="true" @change="searchQuery">
                  <a-select-option value="YES">上架中</a-select-option>
                  <a-select-option value="NO">下架中</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form> -->
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        <a-button @click="saveBatchEdit">保存</a-button> -->

        <!--      <a-button type="primary" icon="download" @click="handleExportXls('商品')">导出</a-button>-->
        <!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
        <!--        <a-button type="primary" icon="import">导入</a-button>-->
        <!--      </a-upload>-->
        <!-- 高级查询区域 -->
        <!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
        <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"> 删除 </a-menu-item>
            <a-menu-item key="2" @click="$refs.batchModifyInventory.show(selectionRows)"> 修改库存 </a-menu-item>
            <a-menu-item key="3" @click="showChangeOrderstate('上架中')"> 上架 </a-menu-item>
            <a-menu-item key="4" @click="showChangeOrderstate('下架中')"> 下架 </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down" />
          </a-button>
        </a-dropdown> -->
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
          <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
          >项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          :bordered="false"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
          <!-- <template slot="stateSlot" slot-scope="text, record, index">
            <a-switch
              :loading="record.stateLoading"
              checked-children="上架中"
              un-checked-children="下架中"
              :checked="record.upFlag == '上架中' ? true : false"
              @click="stateEdit(record, index)"
            />
          </template>
          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text, record, index">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
            <img
              v-else
              :src="getImgView(text)"
              height="25px"
              alt=""
              style="max-width: 80px; font-size: 12px; font-style: italic"
              @click="showCropper(index)"
            />
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
            <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
              下载
            </a-button>
          </template>
          <template slot="tradeNameSlot" slot-scope="text, record, index">
            <div v-if="!record.isEdit">{{ record.tradeName }}</div>
            <a-input v-else v-model="record.tradeName" />
          </template>
          <template slot="productDescriptionSlot" slot-scope="text, record, index">
            <div v-if="!record.isEdit">{{ record.productDescription }}</div>
            <a-input v-else v-model="record.productDescription" />
          </template>
          <template slot="limitBuySlot" slot-scope="text, record, index">
            <div v-if="!record.isEdit">{{ record.limitBuy }}</div>
            <a-input-number v-else v-model="record.limitBuy" />
          </template>
          <template slot="sortSlot" slot-scope="text, record, index">
            <div v-if="!record.isEdit">{{ record.sort }}</div>
            <a-input-number v-else v-model="record.sort" />
          </template> -->

          <span slot="action" slot-scope="text, record">
            <!-- <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleEdit(record, 'copy')">复制</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm> -->
            <!--          <a-dropdown>-->
            <!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
            <!--            <a-menu slot="overlay">-->
            <!--              <a-menu-item>-->
            <!--                <a @click="handleDetail(record)">详情</a>-->
            <!--              </a-menu-item>-->
            <!--              <a-menu-item>-->
            <!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
            <!--                  <a>删除</a>-->
            <!--                </a-popconfirm>-->
            <!--              </a-menu-item>-->
            <!--            </a-menu>-->
            <!--          </a-dropdown>-->
          </span>
        </a-table>
      </div>
    </a-card>
  </a-modal>
</template>
  
  <script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { deleteAction, postAction, getAction } from '@api/manage'

export default {
  name: 'HcCommodityList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      visiable: 'false',

      description: '商品管理页面',
      dataSource: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '名字',
          align: 'center',
          dataIndex: 'text',
        },
      ],
      url: {
        list: '/hc/hcCommodity/list',
        delete: '/hc/hcCommodity/delete',
        deleteBatch: '/hc/hcCommodity/deleteBatch',
        exportXlsUrl: '/hc/hcCommodity/exportXls',
        importExcelUrl: 'hc/hcCommodity/importExcel',
      },
      dictOptions: {},
      superFieldList: [],

      cropperImgIndex: '',
      visiable: false,
    }
  },
  created() {},
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  mounted() {
    setTimeout(() => {
      this.dataSource = [
        {
          name: '11',
          text: '11',
        },
      ]
    }, 2000)
  },
  methods: {
    show() {
      this.visiable = true
    },
    handleOk() {},
  },
}
</script>
  <style scoped>
@import '~@assets/less/common.less';
</style>